<template>
  <view class="withdrawal">
    <Navbar :title="t('bankDetail.title')"> </Navbar>
    <view class="type">
      <view
        v-for="(tab, index) in ['order', 'with']"
        class="left"
        @click="switchTab(index)"
        :class="{ clicked: activeTab == index }"
      >
        {{ t("bankDetail." + tab) }}
      </view>
    </view>
    <view v-if="orderList.length > 0">
      <view>
        <scroll-view scroll-y class="abc" @scrolltolower="loadNextPage">
          <view class="list" v-for="(item, index) in orderList" :key="index">
            <view class="list-left">
              <view class="idcopy">
                <view>{{
                  showAccount(
                    activeTab == 0 ? item.recharge_id : item.withdrawal_id
                  )
                }}</view>
                <view class="copy" @click="copyAnyThing(item.recharge_id)"
                  ><img src="../../static/my/Frame.png" alt=""
                /></view>
              </view>
              <view>{{ item.create_time }}</view>
            </view>
            <view class="list-right-items">
              <view class="item">
                <view>{{ t("auth.status") }}：</view>
                <view v-if="activeTab == 0">
                  <text v-if="item.status == 1">{{
                    t("bankDetail.to_matched")
                  }}</text>
                  <text v-if="item.status == 2">{{
                    t("bankDetail.to_pay")
                  }}</text>
                  <text v-if="item.status == 3">{{
                    t("bankDetail.can_pay")
                  }}</text>
                  <text v-if="item.status == 4">{{ t("auth.checking") }}</text>
                  <text v-if="item.status == 5">{{ t("auth.succe") }}</text>
                  <text v-if="item.status == 6">{{ t("auth.fail") }}</text>
                </view>
                <view v-else>
                  <text v-if="item.status == 1">{{ t("auth.checking") }}</text>
                  <text v-if="item.status == 2">{{ t("auth.succe") }}</text>
                  <text v-if="item.status == 3">{{ t("auth.fail") }}</text>
                </view>
              </view>
              <view class="pay-amount">
                <text>{{
                  Number(
                    activeTab == 0 ? item.obtain_amount : item.play_amount * (1 - item.free_rate)
                  ).toFixed(3)
                }}</text>
                <text class="unit">{{
                  activeTab == 0 ? "USDT" : "USDT"
                }}</text>
              </view>
              <view
                class="btn"
                @click="pay(item)"
                v-if="item.status == 2 && activeTab == 0"
              >
                <view>{{ t("bankDetail.go_pay") }}</view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    <nodata v-else></nodata>
  </view>
</template>

<script setup>
import nodata from "../../components/nodata.vue";

import { ref, onMounted } from "vue";
import api from "../../networks/apis";
import { useI18n } from "vue-i18n";
import Navbar from "../../components/Navbar.vue";
// import { copyAnyThing } from "../../utils/pubUse";
const { t } = useI18n();
const activeTab = ref(0);
const page = ref(1);
const orderList = ref([]);
const hasNoData = ref(false); //是否加载所有数据
onMounted(() => {
  getRechargeOrderList();
});

// 切换菜单
const switchTab = (index) => {
  if (activeTab.value == index) {
    return;
  }
  activeTab.value = index;
  hasNoData.value = false;
  orderList.value = [];
  page.value = 1;
  if (index == 0) {
    getRechargeOrderList();
  } else {
    getWithdrawalOrderList();
  }
};
const copyAnyThing = (url) => {
  uni.setClipboardData({
    data: url,
    success: function () {
      uni.showToast({
        title: "复制成功",
        duration: 2000,
      });
    },
    fail: function () {
      uni.showToast({
        title: "复制失败",
        icon: "error",
        duration: 2000,
      });
    },
  });
};
// 获取提现订单列表
const getWithdrawalOrderList = async () => {
  const { data } = await api.getWithdrawalOrderApi({ page: 1, limit: 10 });
  if (data?.length == 10) {
    hasNoData.value = false;
  } else {
    //已加载所有数据
    hasNoData.value = true;
  }
  if (data?.length > 0) {
    orderList.value = orderList.value.concat(data || []);
    page.value++;
  }
};
// 展示id号
const showAccount = (account) => {
  console.log("account", account);
  if (!account) return;
  let fixed_address =
    account.slice(0, 4) + "***" + account.slice(account.length - 4);
  return fixed_address;
};

// 获取充值订单列表
const getRechargeOrderList = async () => {
  const { data } = await api.getRechargeOrderApi({
    page: page.value,
    limit: 10,
  });
  if (data?.length == 10) {
    hasNoData.value = false;
  } else {
    // 已加载所有数据
    hasNoData.value = true;
  }
  if (data?.length > 0) {
    orderList.value = orderList.value.concat(data || []);
    page.value++;
  }
};

// 去支付
const pay = (item) => {
  uni.navigateTo({
    url: `/pages/recharge/bank-recharge`,
    events: {
      // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
      acceptDataFromOpenedPage: function (item) {
        console.log(item);
      },
      someEvent: function (data) {
        console.log(data);
      },
    },
    success: function (res) {
      // 通过eventChannel向被打开页面传送数据
      res.eventChannel.emit("acceptDataFromOpenerPage", {
        data: item,
      });
    },
  });
};

const loadNextPage = async () => {
  if (hasNoData.value) return;
  if (activeTab == 0) {
    await getRechargeOrderList();
  } else {
    await getUserBalance();
  }
};
</script>

<style lang="scss" scoped>
.abc {
  height: 100vh;
  background: linear-gradient(180deg, #040a40 0%, #042e40 0%, #0d1324 100%);
}
.withdrawal {
  width: 750rpx;
  height: 100vh;
  box-sizing: border-box;
  background: linear-gradient(180deg, #040a40 0%, #042e40 0%, #0d1324 100%);

  .type {
    width: 688rpx;
    height: 134rpx;
    font-size: 28rpx;
    margin: 18rpx auto;
    font-family: Arial, Arial;
    line-height: 33rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-image: url("/static/drawings/Rectangle 47.png");
    background-size: cover;
    background-repeat: no-repeat;

    .left {
      font-weight: normal;
      color: rgba(255, 255, 255, 0.5);
    }

    .right {
      font-weight: normal;
      color: rgba(255, 255, 255, 0.5);
    }

    .clicked {
      padding-bottom: 20rpx;
      font-size: 28rpx;
      font-family: Arial, Arial;
      font-weight: 900;
      color: #ffffff;
      line-height: 33rpx;
      border-bottom: 2px solid white;
    }
  }

  .list {
    width: 690rpx;
    /* height: 168rpx; */
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-image: url("/static/drawings/Rectangle 33.png");
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: 22rpx;

    .list-left {
      width: 280rpx;
      height: 168rpx;
      font-size: 24rpx;
      font-family: Arial, Arial;
      font-weight: normal;
      color: rgba(255, 255, 255, 0.5);
      line-height: 28rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      .idcopy {
        display: flex;
        align-items: center;
        .copy {
          margin-left: 18rpx;
        }
      }
    }

    .list-right {
      display: flex;
      align-items: center;
      width: 250rpx;
      height: 40rpx;
      font-size: 28rpx;
      font-family: Arial, Arial;
      font-weight: 900;
      color: #00d084;
      .img {
        width: 30rpx;
        height: 30rpx;
      }
    }
    .list-right-items {
      width: 250rpx;
      // height: 40rpx;
      // font-size: 28rpx;
      // font-family: Arial, Arial;
      // font-weight: 900;
      // color: #00d084;
      .pay-amount {
        font-size: 28rpx;
        font-family: Arial, Arial;
        font-weight: 900;
        color: #00d084;
        margin: 8rpx 0;
        .unit {
          margin-left: 8rpx;
        }
      }
      .item {
        display: flex;
        align-content: center;
        // justify-content: space-between;
        // font-weight: 600;
        color: rgba(255, 255, 255, 0.5);
        font-size: 28rpx;
      }
      .btn {
        width: 100%;
        padding: 5rpx 15rpx;
        border: 1rpx solid rgba(255, 255, 255, 0.5);
        color: rgba(255, 255, 255, 0.5);
        font-size: 24rpx;
        border-radius: 12rpx;
        text-align: center;
      }
    }

    .list-right1 {
      width: 220rpx;
      height: 40rpx;
      font-size: 28rpx;
      font-family: Arial, Arial;
      font-weight: 900;
      color: #d03e00;

      .img {
        width: 30rpx;
        height: 30rpx;
      }
    }
  }
}
</style>
